<template>
  <view class="container" @click.stop="enterShop(data.shopId, data.dishCategoryId, data.id)">
    <view class="product">
      <view class="icon">
        <img class="icon-img" :src="props.data.image" alt="商品图片" />
      </view>
      <view class="product-info">
        <view class="first-line">
          <!-- 品牌移至标题前 -->
          <view class="brand" v-if="data?.betterDisplay">招牌</view>
          <view class="product-name">{{ props.data.name }}</view>
          <!-- 移除可预定标签 -->
        </view>

        <view class="product-labels">
          <view class="label-item" v-for="label in props.data.labels" :key="label">{{ label }}</view>
        </view>

        <view class="price-info">
          <view class="price">¥{{ props.data.nowPrice }}</view>
          <view class="old-price">¥{{ props.data.oldPrice }}</view>
          <view class="month-sell">月售: {{ data.dishStatisticsInfo?.count || '--' }}</view>
          <view class="scope">{{
            data.dishStatisticsInfo?.goodRate
              ? `评分${(5 * (data.dishStatisticsInfo.goodRate / 1)).toFixed(1)}`
              : '暂无评分'
          }}</view>
        </view>

        <view class="delivery-info">
          <view class="delivery-method" :style="deliveryMethodStyleOf(props.data.shopInfo?.deliveryMethod)">
            {{ deliveryMethodLabelOf(props.data.shopInfo?.deliveryMethod) }}
          </view>
        </view>
      </view>
    </view>

    <!-- 店铺信息左右对齐 -->
    <view class="shop-info" @click.stop="enterShop(data.shopId)">
      <view class="left">
        <img :src="data.shopInfo?.logo" alt="商品的店铺logo" class="logo" />
        <view class="shop-base-info">
          <view class="shop-title">
            <span>{{ data.shopInfo.name }}</span>
          </view>
          <view class="shop-parameter">
            <span>{{ data.shopInfo.statistical.score ? `评分${data.shopInfo.statistical.score}` : '暂无评分' }}</span>
            <span>起送¥{{ props.data.shopInfo.minimumDeliveryAmount }}</span>
          </view>
        </view>
      </view>
      <view class="right">
        <view class="distance"
          >{{ (data.shopInfo?.distance || 0).toFixed(1) }}km&nbsp;
          <span class="delivery-time" v-if="data.shopInfo?.deliveryFee">配送¥{{ data.shopInfo?.deliveryFee }}</span
          >&nbsp;
          <span v-if="props.data.shopInfo?.packingFee">餐盒￥{{ props.data.shopInfo.packingFee }}</span>
        </view>
        <view v-if="data.shopInfo?.bookable">{{ data.shopInfo?.bookable }}后营业</view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { computed, defineProps } from 'vue'
import { NearbyShopProduct } from '@/types/response/shop'
import enterShop from '@/common/function/enterShop'
import { deliveryMethodLabelOf, deliveryMethodStyleOf } from '@/enum/DeliveryMethod'

const props = defineProps({
  data: {
    type: Object as () => NearbyShopProduct,
    required: true
  }
})
</script>
<style scoped lang="scss">
// 变量定义 - 集中管理所有可复用的值
$product-width: 710rpx;
$margin-size: 20rpx;
$padding-size: 20rpx;
$icon-size: 190rpx;
$icon-margin-right: 20rpx;
$border-radius-base: 10px;
$border-radius-small: 5px;
$font-size-small: 21rpx;
$font-size-normal: 22rpx;
$font-size-medium: 25rpx;
$font-size-large: 30rpx;

// 基础样式 - 容器相关
.container {
  display: flex;
  margin: 0 $margin-size $margin-size;
  padding: $padding-size;
  width: $product-width;
  border-radius: $border-radius-base;
  background-color: #fff;
  box-sizing: border-box;
  flex-direction: column;
}

// 商品主体样式
.product {
  display: flex;
  margin-bottom: $margin-size;

  // 商品图片区域
  .icon {
    margin-right: $icon-margin-right;
    width: $icon-size;
    height: $icon-size;

    .icon-img {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }

  // 商品信息区域
  .product-info {
    flex-grow: 1;

    // 第一行：品牌和名称
    .first-line {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .brand {
        margin-right: 10rpx;
        padding: 0 12rpx;
        height: 38rpx;
        font-size: $font-size-medium;
        border-radius: 15rpx;
        color: #000;
        background-color: #f5f5f5;
        line-height: 38rpx;
      }

      .product-name {
        font-size: $font-size-large;
        font-weight: 700;
        line-height: 40rpx;
      }
    }

    // 标签区域
    .product-labels {
      margin-bottom: 10rpx;

      .label-item {
        display: inline-block;
        margin-right: 8rpx;
        padding: 5rpx 10rpx;
        font-size: $font-size-normal;
        color: #fff;
        background-color: #f44;
      }
    }

    // 价格信息区域
    .price-info {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .price {
        font-size: $font-size-large;
        font-weight: 700;
        color: #f74c2e;
      }

      .old-price {
        margin-left: 10rpx;
        font-size: $font-size-normal;
        text-decoration: line-through;
        color: #999;
      }

      .month-sell,
      .scope {
        margin-left: 15rpx;
        font-size: $font-size-normal;
        color: #666;
      }
    }

    // 配送信息区域
    .delivery-info {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10rpx;
      margin-bottom: 10rpx;

      .delivery-method {
        padding: 3rpx 12rpx;
        height: 36rpx;
        line-height: 36rpx;
        font-size: $font-size-small;
        border: 1px solid #9a9a9a;
        border-radius: $border-radius-small;
        color: #9a9a9a;
      }

      .platform_delivery {
        border: none;
        color: #000;
        background-color: #ffd930;
      }
    }
  }
}

// 店铺信息区域样式
.shop-info {
  $shop-info-height: 50rpx;

  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: $font-size-normal;
  color: #666;

  // 左侧店铺信息
  .left {
    display: flex;
    align-items: center;

    .logo {
      margin-right: 10rpx;
      width: $shop-info-height;
      height: $shop-info-height;
      border-radius: 5rpx;
    }

    .shop-base-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .shop-title {
        font-size: $shop-info-height * 0.45;
        color: #1e1e20;
      }

      .shop-parameter {
        font-size: $shop-info-height * 0.4;
        color: #858687;

        span,
        text,
        label {
          margin-right: 10rpx;
        }
      }
    }
  }

  // 右侧距离和配送信息
  .right {
    text-align: right;

    .distance,
    .delivery-time {
      font-size: $font-size-normal;
      color: #666;
    }
  }
}

// 店铺名称特殊样式
.shop-name {
  font-weight: 500;
}

// 店铺其他信息
.shop-other-info {
  display: flex;
  gap: 15rpx;
}
</style>
